<template>
	<view>
		<view class="boxPage u-f-ajc" v-if="configApp.pictureOne && type==3" :style="'background: url('+configApp.webUrl + configApp.ruleApi + configApp.pictureOne+') center no-repeat;background-size: 100% 100%;'">
			<view class="box">
				<view class="row">
					<view class="line">
						<view class="name u-font-xl">
							<text>分享码</text>
						</view>
						<view class="text u-font-lg">
							<u-input v-model="code" maxlength="4" border="none" placeholder="请填写分享码" />
						</view>
					</view>
					<view class="btn">
						<u-button type="error" :disabled="code.length!=4" :loading="loading" @click="getNoteShare(true)">提交</u-button>
					</view>
				</view>
			</view>
		</view>
		<view class="u-f" v-if="type==1">
			<view class="menu" :style="getHeight">
				<view class="list u-f-ajc" 
				:class="{active:index==curMenu}"
				v-for="(item,index) in menuList" :key="index"
				@click="curMenu = index"
				>
					<view class="icon">
						<u-icon :name="item.icon" size="46rpx" color="#909090"></u-icon>
					</view>
				</view>
			</view>
			
			<view class="main" :style="getMinHeight">
				
				<view v-show="curMenu==0">
					<!-- 笔记内容 -->
					<share-info :note="note" />
				</view>
				
				<view v-show="curMenu==1">
					<!-- 笔记附加账号信息 -->
					<share-userlist :list="note.userlist" />
				</view>
				
			</view>
			
		</view>
		
		
		<view class="boxPage u-f-ajc" v-if="configApp.pictureOne && type==2" :style="'background: url('+configApp.webUrl + configApp.ruleApi + configApp.pictureOne+') center no-repeat;background-size: 100% 100%;'">
			<view class="box">
				<view class="row">
					<view class="u-f-ajc">
						<u-empty text="分享已过期" iconSize="140rpx" mode="page"></u-empty>
					</view>
				</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	
	// 导入组件
	import shareUserlist from './components/share-userlist'
	import shareInfo from './components/share-info'
	
	// 导入方法
	import { getNoteShare } from '@/http/api'
	
	export default {
		components:{ shareUserlist , shareInfo },
		data() {
			return {
				id:null,
				code:'',
				type:3,
				data:{},
				loading:false,
				note:{
					userlist:[]
				},
				// 默认选中导航
				curMenu:0,
				// 导航列表
				menuList:[
					{name:'笔记',icon:'order'},
					{name:'账号',icon:'list'}
				]
			}
		},
		async onLoad(e) {
			this.id = e.id
		},
		methods: {
			// 笔记内容
			async getNoteShare(){
				uni.showLoading({title:'获取中...'})
				this.loading = true;
				
				let res = await getNoteShare({id:this.id,code:this.code},()=>{this.loading = false;})
				
				if(res.code==1){
					this.note = res.data
					if(res.data){
						if(!res.data.userlist.length)this.menuList.splice(1,1)
						this.type = 1
					}else{
						this.type = 2
					}
				}else{
					if(res.data===0){
						this.type = 2
					}else{
						uni.showToast({
							title:res.msg,
							icon:'error'
						})
					}
				}
				this.loading = false;
				uni.hideLoading()
			}
		}
	}
</script>

<style scoped lang="scss">
.menu{
	position: fixed;
	left: 0;
	// #ifdef MP
	top: 0;
	// #endif
	// #ifndef MP
	top: 44px;
	// #endif
	width: 100rpx;
	background-color: #f5f5f5;
	.list{
		height: 80rpx;
		font-size: 24rpx;
		color: #4b4b44;
		margin: 30rpx 0;
	}
	.active{
		position: relative;
		background-color: white;
		border-radius: 60rpx 0 0 60rpx;
	}
}
.boxPage{
	height: 100vh;
	width: 100%;
	position: relative;
	z-index: 999;
}
.box{
	position: relative;
	padding: 80rpx 0rpx;
	padding-bottom: 30rpx;
	width: 700rpx;
	background-color: white;
	border-radius: 20rpx;
	.head{
		position: absolute;
		top: -90rpx;
		left: 0;
		right: 0;
		margin: 0 auto;
		width: 180rpx;
		height: 180rpx;
		border-radius: 180rpx;
		background-color: #F8F8F8;
	}
	.userlist{
		height: 400rpx;
		overflow-y: auto;
		overflow-x: hidden;
	}
	.btn{
		margin-top: 70rpx;
	}
	
	.name{
		color: #333333;
		margin-bottom: 10rpx;
	}
	.line{
		padding: 20rpx 0;
		border-bottom: 1rpx solid #F8F8F8;
	}
	.row{
		padding: 0 30rpx;
		padding-bottom: 60rpx;
	}
	
}
.lineBtn{
	margin: 40rpx 20rpx;
}
.main{
	margin-left: 100rpx;
	width: 650rpx;
	border-radius: 10rpx 10rpx 0 0;
	overflow: hidden;
	background-color: white;
	min-height: 100%;
}
</style>
